<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM</title>
    <script>
        let msg = "Hello MVVM";
        window.onload=function(){
            let s1 = document.getElementById("s1");
            let inText = document.getElementById("inText");
            // Model -> View
            s1.innerHTML = msg;
            inText.value = msg;

            // 监听input元素的事件,当文本款的值发生变化时触发事件
            inText.oninput = function(){
                 // View -> Model
                msg = this.value;
                s1.innerHTML = msg;
            }
        }
    </script>
</head>
<body>
    <div>
        <span id="s1"></span><br>
        <input type="text" id="inText">
    </div>
</body>
</html>